<template>
  <div class="xiangq">
    <!-- <h4>详情</h4> -->
    <van-nav-bar
      title="详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <div
      class="top"
      :style="{
        backgroundImage:
          'url(' + (shopinfo.info && shopinfo.info.poi_back_pic_url) + ')',
      }"
    >
      <img :src="shopinfo.info.picUrl" alt="" />
      <span>{{ shopinfo.info.name }}</span>

      <span
        class="xing"
        v-if="isCollect"
        @click="request_unfav(shopinfo.info)"
        style="color: red"
        >❤</span
      >

      <span class="xing" v-else @click="request_fav(shopinfo.info)"
        >❤</span
      >
    </div>
    <div class="box">
      <div class="left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item
            v-for="(item, index) in shopinfo.taglist"
            :key="index"
            :title="item.name"
          />
        </van-sidebar>
      </div>

      <div class="right">
        <div
          class="good"
          v-for="(item, index) in shopinfo.taglist[activeKey].goodlist"
          :key="index"
         
        >
          <div><img :src="item.picture" alt="" /></div>
          <div class="good-right">
            <span class="name">{{ item.name }}</span>
            <span class="min_price">售价{{ item.min_price }}</span>
            <span class="month">月售{{ item.month_saled }}</span>
          </div>
          <div class="addfood">
                   <span @click="request_shopcartsub(item)" v-show="isinshopcart(item)"  class="a">-</span>
                    <span v-show="isinshopcart(item)">{{isinshopcartCount(item)}}</span>
                    <span @click="request_shopcartadd(item)" class="a">+</span>
          </div>
        </div>
      </div>
    </div>

    <div class="summary">
      <!-- 通过ref设置的标识  获取子组件实例，进而调用自组建的方法 -->

      <div class="shopcart" v-show="visible">
        <!-- @click.事件修饰符 -->
        <!-- @click.stop  组织事件冒泡 -->
        <!-- @click.ctrl 只有同时按下ctrl键并点击才会触发 -->
        <div class="content" @click.stop="1">
          <div class="title">
            <span> <van-icon name="cart" /> 总数{{totalCount}}总价{{totalPrice}}</span>
          
            <span @click="request_clearshopcartlist">清空</span>
          </div>

          <div v-if="shopcartlist.length != 0" class="gw">
            <div v-for="(item, index) in shopcartlist" :key="index" class="good">
              <div class="imgbox">
                <img :src="item.picture" alt="" />
              </div>

               <div class="text">
                <div class="name">{{ item.name }}</div>
                <div class="pb">
                  <span>¥{{ item.min_price }}</span>              
                  <div>
                    <span @click="sub(item)">-</span>
                    <span>{{ item.count }}</span>
                    <span @click="add(item)">+</span>
                  </div>
              </div>
              
                </div>
          </div>
        </div>
          <div v-else class="empty">购物车空空如也,去逛逛!</div>
        </div>
      </div>

      <div class="footer">
        <span @click="changeVisible()">购物车</span>
        <span @click="buy()">去结算</span>
      </div>
    </div>
  </div>
</template>

<script>
var pic =
  "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202102%2F26%2F20210226073347_50f94.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1668131440&t=6df291a148cdb21289e91211d4daea32";
import { shop_shopinfo } from "../../utils/api";
import { Dialog } from "vant";
import { mapActions,mapState } from "vuex";

import { Toast } from "vant";
import { shopcart_list } from '../../../../day7home/demo/utils/api';

export default {
  data() {
    return {
      activeKey: 0,
      shopinfo: {},
      visible: false,
      // // gw: [
      // //   { name: "秋刀鱼", price: 88, pic, count: 1 },
      // //   { name: "大黄鱼", price: 777, pic, count: 2 },
      // //   { name: "皮皮虾", price: 9, pic, count: 3 },
      // // ],
      // gw :"shopcartlist" 
    };
  },
    created() {
    // 请求后端数据
    shop_shopinfo({ id: this.$route.params.id }).then((res) => {
      if (res.data.shopinfo) {
        this.shopinfo = res.data.shopinfo;
         console.log(res.data.shopinfo)
      } else {
        Dialog.alert({
          title: "提示",
          message: "该店铺已倒闭!",
        }).then(() => {
          this.$router.go(-1);
        });
      }

      // console.log(this.$store.state)
    });
  },
  computed: {
    ...mapState(['shopcartlist']),
    isCollect() {
      var index = this.$store.state.collectlist.findIndex((item) => {
        return item.mtWmPoiId == this.shopinfo.mtWmPoiId;
      });
      return index !== -1;
    },
    totalCount(){
            var sum = 0;
            this.shopcartlist.forEach((item)=>{
                sum += item.count;
            })
            return  sum
        },
   totalPrice(){
            var sum = 0;
            this.shopcartlist.forEach((item)=>{
                sum += item.count * item.min_price
            })
            return parseInt(sum) 
        }
   
  },
  methods: {
    onClickLeft() {
      Toast(this.$router.go(-1));
    },
    changeVisible() {
      this.visible = !this.visible; //让购物车显示/隐藏
    },
    clean(){},
    handleClick() {
      console.log("触发了!");
    },
    buy(){
       this.$router.push('/buygoods')
    },

    // 将两个异步方法映射进来 可以在这个组件直接使用
    ...mapActions(['request_fav','request_unfav','request_clearshopcartlist','request_shopcartadd','request_shopcartsub']),
  
    // 判断当前商品在不在购物车里 如果在同步显示
    isinshopcart(item){
       var index =   this.shopcartlist.findIndex((it)=>{
           return it.id == item.id
         })
         return index !== -1
    },
    // 判断当前商品在购物车中的数量
    isinshopcartCount(item){
       var good =   this.shopcartlist.find((it)=>{
           return it.id == item.id
         })
        //  条件成立 当前商品在购物车中 返回数量
         if(good){
           return   good.count;
         }
    }
  },
};
</script>

<style lang="scss" scoped>
// *{
//     margin:0;
//     padding:0;
// }
.top {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;

  img {
    width: 40px;
    border-radius: 10px;
    vertical-align: middle;
    margin-right: 10px;
  }
}
.box {
  display: flex;
}
.right .good img {
  width: 100px;
  height: 100%;
  vertical-align: middle;
}
.good {
  display: flex;
  margin: 20px 0;
  height: 80px;
  // justify-content: space-between;
  .name {
    display: block;
    margin-bottom: 20px;
    color: red;
  }
}
.summary {
  position: fixed;
  // top:0;
  bottom: 0;
  width: 100%;
  background-color: #555;
  color: white;
  display: flex;
  justify-content: space-between;
  // padding: 10px 10px;
  box-sizing: border-box;
  flex-direction: column;
}
.imgbox {
  width: 80px;
  height: 80px;
  img {
    width: 100%;
  }
}
.shopcart {
  height: 100%;
  width: 100%;
  // position: fixed;
  // bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  .title{
      display: flex;
      justify-content: space-between;
      span{
          display: inline-block;
      }
  }
}
.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px 10px;
  box-sizing: border-box;
}
.text{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-left:10px ;
}
.pb{
    width: 250px;
    display: flex;
    // flex-direction: column;
    justify-content: space-between;
}
.good-right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
    span{
      font-size: 14px;
    }

}
// .btn{
//     margin-left: 150px;
//     line-height: 100px;
// }

.addfood{
    width: 20%;
    margin-top: 60px;
    .a{
      width: 20px;
      height: 20px;
      display: inline-block;
      background-color: aquamarine;
      border-radius: 5px;
      text-align: center;
    }
}
.empty{
  height: 200px;
  text-align: center;
  line-height: 200px;
}
</style>